<template>
<div class="container .container">
  <section class="section">
        <b-field
            label="Адрес Электронной почты"
        >
          <b-input 
            type="text"
            required
            maxlength="30"
            pattern="^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$"
            v-model="user.email"
            validation-message="Некорректный адрес"
          >
          </b-input>
        </b-field>

        <b-field 
            label="Номер телефона"
        >
          <b-input
            maxlength="30"
            type="text"
            required
            pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$"
            v-model="user.phone"
            validation-message="Некорректный номер"
          >
          </b-input>
        </b-field>
        <b-button type="is-success" @click=sendForm >Отправить</b-button>
    </section>

 <b-table :data="users" :columns="columns"></b-table>
</div>

</template>

<script>
export default {
  name: 'DefaultLayout',
  data() {
    return {
      users: [],
      columns: [
          {
            field: 'id',
            label: 'ID',
          },
          {
            field: 'email',
            label: 'EMAIL',
          },
          {
            field: 'phone',
            label: 'PHONE',
          },
      ],
      user: {
        email: '',
        phone: '',
      },
    }
  },
  methods: {
    async sendForm() {
      if (!this.user.email || !this.user.phone) {
       return
      }
      const {status} = await this.$axios.$post('/users', this.user)
      this.getUsers()
    },
    async getUsers() {
      this.users = await this.$axios.$get('/users')
      this.users.pop()
    }
  },
  mounted() {
    this.getUsers()
  }
}
</script>

